<template>
    <div class="sidebar">
        <el-menu
            class="sidebar-el-menu"
            :default-active="onRoutes"
            :collapse="collapse"
            background-color="#324157"
            text-color="#bfcbd9"
            active-text-color="#20a0ff"
            unique-opened
            router
        >
            <template v-for="item in items">
                <template v-if="item.subs">
                    <el-submenu :index="item.index" :key="item.index">
                        <template slot="title">
                            <i :class="item.icon"></i>
                            <span slot="title">{{ item.title }}</span>
                        </template>
                        <template v-for="subItem in item.subs">
                            <el-submenu v-if="subItem.subs" :index="subItem.index" :key="subItem.index">
                                <template slot="title">{{ subItem.title }}</template>
                                <el-menu-item v-for="(threeItem, i) in subItem.subs" :key="i" :index="threeItem.index">{{
                                    threeItem.title
                                }}</el-menu-item>
                            </el-submenu>
                            <el-menu-item v-else :index="subItem.index" :key="subItem.index">{{ subItem.title }}</el-menu-item>
                        </template>
                    </el-submenu>
                </template>
                <template v-else>
                    <el-menu-item :index="item.index" :key="item.index">
                        <i :class="item.icon"></i>
                        <span slot="title">{{ item.title }}</span>
                    </el-menu-item>
                </template>
            </template>
        </el-menu>
    </div>
</template>

<script>
import bus from '../common/bus';
import { GetMenusByRole } from '../../api/module/login';
export default {
    data() {
        return {
            collapse: false,
            username: JSON.parse(sessionStorage.getItem('user')).username,
            itemsFact: [],
            items: [
                // {
                // 	icon: 'el-icon-lx-home',
                // 	index: 'dashboard',
                // 	title: '系统首页'
                // },
                // 图标--测试数据
                // {
                // 	icon: 'el-icon-lx-favor',
                // 	index: 'icon',
                // 	title: '图标'
                // },
                {
                    icon: 'el-icon-lx-news',
                    index: 'BigData', //还没编写
                    title: '数据大屏'
                },
                {
                    icon: 'el-icon-lx-qrcode',
                    index: 'well', //'Data_Classification',
                    title: '数据管理'
                },
                {
                    icon: 'el-icon-folder-opened',
                    index: 'WellImport', //,
                    title: '数据导入'
                },
                {
                    icon: 'el-icon-lx-rank',
                    index: 'Statistical_Analysis',
                    title: '统计分析',
                    subs: [
                        {
                            index: 'CementingQuality',
                            title: '固井质量查询'
                        },
                        {
                            index: 'CementingQualityPassRate',
                            title: '固井质量合格率查询'
                        },
                        {
                            index: 'AllCementingQualityPassRate',
                            title: '全井固井质量合格率查询'
                        },
                        // {
                        // 	index: 'CementingWorkData',
                        // 	title: '固井作业数据查询'
                        // },
                        {
                            index: 'WorkNumberStatistics',
                            title: '作业数量统计'
                        },
                        {
                            index: 'DataContrast',
                            title: '数据对比'
                        }
                    ]
                },
                {
                    icon: 'el-icon-lx-roundcheck',
                    index: 'Cementing_Quality',
                    title: '固井质量',
                    subs: [
                        {
                            index: 'ConstructionQualityEvaluation',
                            title: '施工质量评价'
                        },
                        {
                            index: 'QualityWarning',
                            title: '质量预警'
                        },
                        {
                            index: 'CementPre',
                            title: '固井预测'
                        },
                        {
                        	index: 'NetWorkParameter',
                        	title: '灰色神经网络模型参数'
                        }
                    ]
                },
                {
                    icon: 'el-icon-lx-settings',
                    index: 'System_Management',
                    title: '系统管理',
                    subs: [
                        {
                            index: 'DataDictManagement',
                            title: '数据字典管理'
                        },
                        {
                            index: 'OrganizationalStruManagement',
                            title: '组织机构管理'
                        },
                        {
                            index: 'UserManagement',
                            title: '用户管理'
                        },
                        {
                            index: 'RoleManagement',
                            title: '角色管理'
                        },
                        {
                            index: 'RoleAuthorization',
                            title: '角色授权'
                        }
                    ]
                }
            ]
        };
    },
    computed: {
        onRoutes() {
            return this.$route.path.replace('/', '');
        }
        // username () {
        // 	let username =  JSON.parse(sessionStorage.getItem('user')).username; //从sessionStorage获取数据--来自login的数据
        // 	return username ? username : this.name;
        // }
    },
    created() {
        // 通过 Event Bus 进行组件间通信，来折叠侧边栏
        bus.$on('collapse', (msg) => {
            this.collapse = msg;
            bus.$emit('collapse-content', msg);
        });
    },
    mounted() {
        //查询动态从菜单
        this.GetMenusByRole(this.username);
    },
    methods: {
        GetMenusByRole(username) {
            GetMenusByRole(username).then((res) => {
                // console.log(res)
                //筛选出菜单
                var j = 0;
                var i = 0;
                var item = {};
                for (var k = 0; k < res.data.moduleCodes.length; k++) {
                    // console.log(res.data.moduleCodes[k])
                    if (res.data.moduleCodes[k].length < 4) {
                        //主菜单
                        var temp = res.data.moduleCodes[k].split('');
                        var t = temp[1];
                        item = {
                            icon: this.items[t].icon,
                            index: this.items[t].index,
                            title: this.items[t].title
                        };
                        if (this.items[t].subs != null) {
                            item.subs = [];
                        }
                        this.itemsFact[j] = item;
                        i = j;
                        j++;
                        i = 0;
                    } else {
                        //子菜单
                        var temp = res.data.moduleCodes[k].split('');
                        var t1 = temp[1];
                        var t2 = temp[3];
                        this.itemsFact[j - 1].subs.push({
                            index: this.items[t1].subs[t2 - 1].index,
                            title: this.items[t1].subs[t2 - 1].title
                        });
                        i++;
                    }
                }
                // console.log(this.itemsFact)
                this.items = this.itemsFact;
            });
        }
    }
};
</script>

<style scoped>
.sidebar {
    display: block;
    position: absolute;
    left: 0;
    top: 70px;
    bottom: 0;
    overflow-y: scroll;
}
.sidebar::-webkit-scrollbar {
    width: 0;
}
.sidebar-el-menu:not(.el-menu--collapse) {
    width: 200px;
}
.sidebar > ul {
    height: 100%;
}
</style>
